<template>
	<div class="panel-content">
		<h1>线性渐变环形图</h1>
		<p>
			我们创建了一个圆环图，它的内半径为 40%，外半径为
			70%。我们定义了一个线性渐变，它从红色渐变到蓝色，这个渐变的方向是从图形的中心点向下。这个图表的其余部分是标准的饼图数据格式。
		</p>
		<div
			style="width: 600px; height: 400px; background-color: #0e1824"
			ref="chartContent1"
		></div>
		<p>
			在 ECharts 中，可以通过设置 series 中的 itemStyle 的 color
			属性来指定渐变方向。对于线性渐变，可以使用 echarts 的
			graphic.LinearGradient
			对象来定义渐变的起点和终点，进而指定渐变方向。在这个例子中，渐变方向是从左上角到右下角，即
			x 坐标为 0，y 坐标为 0，终点为 x 坐标为 1，y 坐标为 1。你可以根据需要调整
			color 对象中的 x 和 y 的值来改变渐变的方向。
		</p>
		<div
			style="width: 600px; height: 400px; background-color: #0e1824"
			ref="chartContent2"
		></div>
	</div>
</template>

<script>
import { init } from 'echarts';
export default {
	name: 'doughnutDiagram',
	data() {
		return {
			chartData: '88.23'
		};
	},
	mounted() {
		this.showChart();
	},
	methods: {
		showChart() {
			// 写法1
			let chart = init(this.$refs.chartContent1);
			let option = {
				series: [
					{
						name: '渐变环形图',
						type: 'pie',
						radius: ['40%', '70%'], // 设置内外半径制造出环形效果
						color: [
							{
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#f2faf9' // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#03f7ee' // 100% 处的颜色
									}
								],
								global: false // 缺省为 false
							}
						],
						data: [
							{ value: 335, name: '直接访问' },
							{ value: 310, name: '邮件营销' },
							{ value: 234, name: '联盟广告' },
							{ value: 135, name: '视频广告' },
							{ value: 1548, name: '搜索引擎' }
						]
					}
				]
			};
			chart.clear();
			chart.setOption(option);
			// 写法2
			let chartTest = init(this.$refs.chartContent2);
			let data = {
				series: [
					{
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 5,
							borderColor: '#fff',
							borderWidth: 2,
							color: {
								type: 'linear',
								x: 0, // 渐变起始位置的横坐标，0 为最左侧，0.5 为中间，1 为最右侧。
								y: 0, // 渐变起始位置的纵坐标，0 为最顶部，0.5 为中间，1 为最底部。
								x2: 1, // 渐变结束位置的横坐标。
								y2: 0, // 渐变结束位置的纵坐标。
								colorStops: [
									{
										offset: 0,
										color: '#f2faf9' // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#03f7ee' // 100% 处的颜色
									}
								],
								global: false // 缺省为 false
							}
						},
						label: {
							normal: {
								show: false,
								position: 'center'
							},
							emphasis: {
								show: true,
								textStyle: {
									fontSize: '20',
									fontWeight: 'bold'
								}
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						data: [
							{ value: 1048, name: 'Search Engine' },
							{ value: 735, name: 'Direct' },
							{ value: 580, name: 'Email' },
							{ value: 484, name: 'Union Ads' },
							{ value: 300, name: 'Video Ads' }
						]
					}
				]
			};
			chartTest.setOption(data);
		}
	}
};
</script>

<style scoped>
.panel-content {
	margin: 50px auto;
	display: inline-block;
}

.panel-content > div {
	margin: 0px auto;
}

.panel-content > p {
	max-width: 600px;
	display: inline-block;
	text-align: left;
}
</style>
